<template>
  <div class="main">

    <div class="select">
      <el-input placeholder="相关搜索">
        <template #prefix>
          <el-icon class="el-input__icon">
            <search/>
          </el-icon>
        </template>
      </el-input>
    </div>

    <div class="body">
      <div class="left">
        <div class="top">
          <div class="introduce">
            <div class="title">
              欢迎使用基于node.js构建的Jenkins轻量运维工具,集成邮件服务,及时通知等等的便捷功能,一键导入项目
            </div>
            <div class="center">
              你可以使用很小的运行内存来进行仓库的流水线部署
            </div>
            <div class="bottomTitle">
              <div class="button">
                开始体验
              </div>
            </div>
          </div>
          <div class="people">
            <img :src="right" alt="" style="border-radius: 8px;    box-shadow: 1px 1px 5px 1px rgba(33, 33, 33, 0.13);"/>
          </div>
        </div>
        <div class="echarts">
          <div class="LeftEcharts" ref="echartsDom"></div>
          <div class="RightEcharts">
           <div class="topInfo">
             <div class="pieChart" ref="RightEcharts"></div>
             <div class="RightInfo">
               <p>cpu核心数: <span style="color: lime">{{status.cpu.count}}</span></p>
               <p>cpu型号: <span style="color: lime; display: flex; justify-content: flex-start">{{status.cpu.models[0]}}</span></p>
               <p>cpu基准频率: <span style="color: lime">{{status.cpu.speeds[0]}}MB</span></p>
             </div>
           </div>
            <div class="bottomEcharts">
              <div class="free">
                可用内存<span>{{(memory.free/1073741824).toFixed(2)}} GB</span>
              </div>
              <div class="total">
                内存总量<span>{{(memory.total/1073741824).toFixed(2)}} GB</span>
              </div>
              <div class="used">
                已用内存<span>{{(memory.used/1073741824).toFixed(2)}} GB</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="BottomLeft"></div>
          <div class="BottomRight"></div>
        </div>
      </div>
      <div class="right">
        <video :src="VideoApi" controls="true" autoplay="autoplay" @ended="SetVideo"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue';
import right from '@/assets/image/index/right.png';
import {onMounted, ref} from "vue";
import {GetComputer} from "@/api/computer/computerInfo.js";
import * as echarts from 'echarts';

onMounted(() => {
  GetStatus()
})

const echartsDom = ref('');
const RightEcharts = ref('');
const memory=ref({
  free: 0,
  total: 0,
  used: 0,
})

const status=ref({
  cpu:{
    count:null,
    speeds:[],
    models:[]
  }
})

const VideoApi=ref('http://api.yujn.cn/api/xjj.php?type=video&');

const GetStatus = async () => {
  const updateChart = async () => {
    try {
      const res = await GetComputer();
      const data = res.data.data;
      status.value.cpu=data.cpu

      const option = {
        title: {
          text: data.serverName,
          subtext: 'cpu状态时序图'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.cpu.models,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            formatter: function (value) {
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.cpuLoad,
            type: 'line',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      echarts.init(echartsDom.value).setOption(option, true);

      const new_option = {
        title: {
          text: data.serverName,
          subtext: 'cpu负载状态'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'cpu负载状态',
            type: 'gauge',
            progress: {
              show: true
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}'
            },
            data: [
              {
                value: data.cpu.usage,
              }
            ]
          }
        ]
      };

      echarts.init(RightEcharts.value).setOption(new_option, true);

      // 更新内存状态
      memory.value = data.memory;
    } catch (error) {
      console.error(error);
    }
  };
  await updateChart();

  setInterval(updateChart, 500);
};


const SetVideo=()=>{
  VideoApi.value='http://api.yujn.cn/api/xjj.php?type=video&?date='+new Date().getTime()
}
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  margin-left: 180px;
  width: calc(100% - 180px - 20px - 40px);
  height: calc(98vh - 30px);
  background-color: rgb(245, 245, 249);
  text-align: center;
  padding: 20px;
  min-width: 1600px;
  min-height: 600px;
}

.select {
  display: flex;
  width: calc(100%);
  height: 40px;
  border-radius: 5px;
  background-color: rgb(254, 254, 255);
}

.body {
  display: flex;
  min-width: 800px;
  min-height: 500px;
  margin-top: 20px;
  justify-content: space-between;
  width: calc(100%);
  height: calc(98vh - 45px - 40px);
  flex-direction: row;

  .left {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100% - 20%);

    .top {
      display: flex;
      height: 25%;
      background-color: rgb(255, 255, 255);
      border-radius: 10px;
      flex-direction: row;

      .introduce {
        height: 100%;
        width: 60%;
        min-width: 500px;


        .title {
          text-align: left;
          padding: 0 10px;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          height: 33%;
          width: 100%;
          color: rgb(127, 130, 255);
          flex-wrap: wrap;
        }

        .center {
          padding: 0 10px;
          height: 33%;
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;
          color: rgb(127, 130, 255);
        }

        .bottomTitle {
          padding: 0 10px;
          height: 32%;
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .button {
            border: 1px solid rgb(127, 130, 255);
            width: 80px;
            height: 20px;
            padding: 5px;
            color: rgb(127, 130, 255);
            cursor: pointer;
          }

          .button:hover {
            box-shadow: 1px 1px 5px 1px rgba(33, 33, 33, 0.13);
            background-color: rgba(127, 130, 255, 0.27);
            color: white;
            font-size: 16px;
          }
          .button:active {
            color: white;
            font-size: 15px;
          }
        }
      }

      .people {
        display: flex;
        padding: 10px;
        width: 40%;
        height: 100%;
        justify-content: center;

        img {
          width: 900%;
          height: 90%;
        }
      }

    }

    .echarts {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      height: 40%;
      min-height: 280px;
      width: 100%;
      background-color: rgb(255, 255, 255);
      border-radius: 10px;

      .LeftEcharts {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
      }

      .RightEcharts {
        display: flex;
        justify-content: center;
        width: 50%;
        min-height: 300px;
        flex-direction: column;

        .topInfo{
          display: flex;
          flex-direction: row;
          height: 100%;
          width: 100%;

          .pieChart {
            height: 100%;
            width: 70%;
          }
          .RightInfo{
            display: flex;
            width: 30%;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            P{
              text-align: left;
              margin: 15px 0;
            }
          }
        }

        .bottomEcharts {
          width: 100%;
          height: 25%;
          display: flex;
          flex-direction: row;
          justify-content: space-evenly;
          align-items: center;
          padding: 5px;

          .free {
            border: 1px solid rgb(245, 245, 249);
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            span{
              margin: 0 15px;
              color: green;
              font-weight: bold;
              font-size: 18px;
            }
          }

          .total {
            border: 1px solid rgb(245, 245, 249);
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            span{
              margin: 0 15px;
              color: rgb(105, 108, 255);
              font-weight: bold;
              font-size: 18px;
            }
          }

          .used {
            border: 1px solid rgb(245, 245, 249);
            width: 33%;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            span{
              margin: 0 15px;
              color: red;
              font-weight: bold;
              font-size: 18px;
            }
          }
        }
      }
    }


    .bottom {
      margin-top: 20px;
      display: flex;
      //border: 1px solid red;
      height: 30%;


      .BottomLeft {
        //border: 1px solid red;
        display: flex;
        width: 49%;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
      }

      .BottomRight {
        margin-left: 2%;
        //border: 1px solid red;
        display: flex;
        width: 49%;
        background-color: rgb(255, 255, 255);
        border-radius: 10px;
      }

    }

  }


  .right {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 1%;
    width: calc(100% - 79%);
    background-color: rgb(255, 255, 255);
    border-radius: 10px;


    video{
      width: 100%;
      height: 100%;
    }
  }
}
</style>